{% extends "base.html" %}

{% block head_ex %}
<script type="text/javascript">
    var last_page = {{ last_page }};
    var cur_page = {{ cur_page }};
    var photo_per_page = {{ settings.thumbs_per_page }};
    var loaded_pages = [0];
    $(document).ready(function() {
        function refresh_pager() {
            cur_page < last_page ? $("#old_albums").show() : $("#old_albums").hide();
            cur_page > 0 ? $("#new_albums").show() : $("#new_albums").hide();
            $.growlUI("{{ _('Page {0}') }}".format(cur_page+1), "");
        }
        refresh_pager();
        $("#new_albums").hover(function(){
            $(this).toggleClass("hover");
        });
        $("#old_albums").hover(function(){
            $(this).toggleClass("hover");
        });
        $("#new_albums").click(function(){
            $("#content div[name='thumb'][page='"+cur_page+"']").hide();
            cur_page>0 ? cur_page-- : 0;
            $("#content div[name='thumb'][page='"+cur_page+"']").fadeIn(1000);
            refresh_pager();
        });
        $("#old_albums").click(function(){
            if ($.inArray(cur_page+1, loaded_pages) != -1){
                $("#content div[name='thumb'][page='"+cur_page+"']").hide();
                cur_page++;
                $("#content div[name='thumb'][page='"+cur_page+"']").fadeIn(1000);
                refresh_pager();
            } else {
                $("#page").block({ message: $('#loading')});
                $.post('/admin/ajax/',
                        {'action': 'get_album_photos',
                         'album_name': '{{ album.name }}',
                         'start_index': (cur_page+1)*photo_per_page,
                         'pagesize': photo_per_page
                        },
                        function(res){
                            $("#page").unblock();
                            if (res.status=='ok') {
                                if (res.photos.length > 0){
                                    cur_page++;
                                    loaded_pages.splice(0,0,cur_page);
                                    build_thumbs(res.photos, cur_page);
                                }
                                refresh_pager();
                                {% if users.is_admin %}
                                    bind_ajax_actions();
                                {% endif %}
                            } else{
                                alert('error: '+res.error);
                            }
                        }, "json");
            }
        });
        function build_thumbs(photos, page) {
            $("#content div[name='thumb']").hide();
            var count = photos.length;
            for(var i=0; i<count; i++){
                _insert_thumb(photos[i], page);
            }
            bind_details();
        };
        function _insert_thumb(photo, page){
            var thumb_div = $('<div class="mythumb" name="thumb"></div>');
            thumb_div.attr("photo", photo.photo_name).attr("page", page);
            thumb_div.append($('<a href="/slider/{0}/#{1}"><img src="{2}"/></a>'.format(photo.album_name,
                    photo.photo_name, photo.thumb_url)));
        {% if users.is_admin %}
            thumb_div.append($('<div style="clear: both;"></div><input class="selectedphotos" value="{0}" type="checkbox"/>'.format(photo.photo_name)));
        {% endif %}
            {% if users.is_admin %}
            thumb_div.append($('<div class="description">{0}</div>'.format(photo.description || "{{_('click to edit')}}")));
            {% else %}
            thumb_div.append($('<div class="description">{0}</div>'.format(photo.description)));
            {% endif %}
            thumb_div.append($('<textarea maxlength="70" class="edit_description" rows="2" style="display: none;">{0}</textarea>'.format(photo.description)));

            $("#content").append(thumb_div);
            var details = $('<div class="details">'+
                    '<p>{{ _("Filename") }}: {0}</p>'.format(photo.photo_name)+
                    '<p>{{ _("Owner") }}: {0}</p>'.format(photo.owner)+
                    '<p>{{ _("Type") }}: {0}</p>'.format(photo.mime)+
                    '<p>{{ _("Dimensions") }}: {0}x{1}</p>'.format(photo.width, photo.height)+
                    '<p>{{ _("Size") }}: {0}</p>'.format(formatfilesize(photo.size))+
                    '<p>{{ _("Date uploaded") }}: {0}</p>'.format(formatutc(photo.createdate, 'yyyy-MM-dd'))+
                    '</div>');
            $("#content").append(details);
            thumb_div.fadeIn(1000);
        };

        var bind_details = function() {
            $(".mythumb").each(function(){
                var thumb = $(this);
                thumb.find ("img").unbind("hover");
                thumb.find ("img").hover(function(evt){
                    var details = thumb.next(".details");
                    var img = thumb.find ("img");
                    details.css({
                        left: img.position().left + "px",
                        top:  img.position().top + img.height()  + "px"
                    });
                    details.show();
                },function(){
                    thumb.next(".details").hide();
                });
            });
        };
        bind_details();
        {% if users.is_admin %}
        var get_selected_photos  = function() {
            var selected_photos = new Array();
            $.each($('.selectedphotos'), function() {
                if ($(this).attr('checked')){
                    selected_photos.push( $(this).val() );
                }
            });
            return selected_photos;
        };
        $("#setcover").click(function(){
            var selected_photos = get_selected_photos();
            if (selected_photos.length == 0){
                $.growlUI("{{ _('Please select photo') }}", "");
                return;
            }
            $.post('/admin/ajax/',
                {'action': 'set_cover_photo',
                'photo_name': selected_photos[0],
                'album_name': '{{ album.name }}'
                },
                function(res){
                    if (res.status=='ok') {
                        $.growlUI("{{ _('Cover Photo Set') }}", "");
                    } else{
                        alert('error: '+res.error);
                    }
                }, "json");
        });
        $("#deleteselected").click(function(){
            var selected_photos = get_selected_photos();
            if (selected_photos.length == 0){
                $.growlUI("{{ _('Please select photo') }}", "");
                return;
            }
            $("#page").block({ message: $('#deletequestion'), css: { padding: '15px', width: '600px' } });
        });
        $('#deleteno').click( function() {$("#page").unblock(); });
        $('#deleteyes').click(function() {
            var selected_photos = get_selected_photos();
            if (selected_photos.length == 0){
                $("#page").unblock();
                $.growlUI("{{ _('No Photo Selected') }}", "");
                return;
            }

            $("#page").block({message: '<h1>{{ _("Deleting Selected Photos...") }}</h1>',
                css: { border: '1px solid #60a0c0',width:"400px" }
            });
            $.post('/admin/ajax/',
                {'action': 'delete_photos',
                'photos': selected_photos.join(','),
                'album_name': '{{ album.name }}'
                },
                function(res){
                    if (res.status=='ok') {
                        $.growlUI("{0} {{ _('Photos Deleted') }}".format(res.count), "");
                        window.location.reload();
                    } else{
                        alert('error: '+res.error);
                    }
                    $("#page").unblock();
                }, "json");
        });

        function bind_ajax_actions(){
            $(".description").each(function(){
                $(this).unbind("click");
                $(this).click(function(){
                    $(this).hide();
                    $(this).next().show();
                    $(this).next().focus();
                });
                $(this).next().unbind("focusout");
                $(this).next().focusout(function(){
                    var ed_desp = $(this);
                    if ( ed_desp.val().trim().length > 0 &&
                            (ed_desp.val().trim() != ed_desp.prev().text().replace("/&nbsp;/",'').trim())){
                        //update photo description
                        $.post('/admin/ajax/',
                                {'action': 'save_photo',
                                 'photo_name': ed_desp.parent().attr("photo"),
                                 'album_name': '{{ album.name }}',
                                 'description': ed_desp.val()
                                },
                                function(res){
                                    if (res.status=='ok') {
                                        ed_desp.hide();
                                        ed_desp.prev().text(ed_desp.val());
                                        ed_desp.prev().show();
                                    } else{
                                        alert('error: '+res.error);
                                    }
                                }, "json");
                    } else {
                        ed_desp.hide();
                        ed_desp.prev().show();
                    }
                });
            });
        };
        bind_ajax_actions();
        {% endif %}
    });
</script>
{% endblock %}

{% block commandbar %}
    <li>|</li>
    <li><a href="/slider/{{album.name}}/"> {{ _('Slide Show') }} </a></li>
    {% if users.is_admin %}
    <li>|</li>
    <li><a id="deleteselected"> {{ _('Delete Selected') }} </a></li>
    <li>|</li>
    <li><a id="setcover"> {{ _('Set CoverPhoto') }} </a></li>
    <li>|</li>
    <li><a id="backup" title="{{ _('Last Backup') }}:{{ album.lastbackupdate|date }}" href="/admin/download/{{album.name}}/" target="_blank">
        {{ _('Backup Album') }}
    </a></li>
    {% endif %}
{% endblock %}
   
{% block page %}
    <!-- start content -->
    <div style="clear: both;">&nbsp;</div>
    <table id="index"><tr>
        <td id="new_albums">
            <img src="/static/images/left_arrows.jpg" alt="<<"/>
        </td>
        <td>
            <div id="content">
                {% if not photos %}
                    {{ _('no photo') }}
                {% else %}
                    {% for photo in photos %}
                        <div class="mythumb" name="thumb" photo="{{photo.photo_name}}" page="0">
                            <a href="/slider/{{photo.album_name}}/#{{photo.photo_name}}"><img src="{{ photo.thumb_url }}"/></a>
                            {% if users.is_admin %}
                                <div style="clear: both;"></div>
                                <input class="selectedphotos" value="{{photo.photo_name}}" type="checkbox"/>
                            {% endif %}
                            <div class="description">
                                {% if users.is_admin %}
                                    {{photo.description or _('click to edit')}}
                                {% else %}
                                    {{photo.description}}
                                {% endif %}
                            </div>
                            <textarea maxlength="70" class="edit_description" rows="2" style="display: none;">{{photo.description}}</textarea>
                        </div>
                        <div class="details">
                            <p>{{ _("Filename") }}: {{ photo.photo_name }}</p>
                            <p>{{ _("Owner") }}: {{ photo.owner }}</p>
                            <p>{{ _("Type") }}: {{ photo.mime }}</p>
                            <p>{{ _("Dimensions") }}: {{photo.width}}x{{photo.height}}</p>
                            <p>{{ _("Size") }}: {{ photo.size|filesizeformat }}</p>
                            <p>{{ _("Date uploaded") }}: {{ photo.createdate|date }}</p>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </td>
        <td id="old_albums">
            <img src="/static/images/right_arrows.jpg" alt="<<"/>
        </td>
    </tr></table>

    {% if users.is_admin %}
     <div id="deletequestion" style="display:none; cursor: default; color: red;">
       <h1>{{ _('R you seriously delete selected photos?') }}</h1>
       <input type="button" id="deleteno" value="{{ _('No, I just try the button')}}" />&nbsp;&nbsp;
       <input type="button" id="deleteyes" value="{{ _('Yes, delete it')}}" />
    </div>
    {% endif %}

    <!-- end content -->
<div style="clear: both;">&nbsp;</div>
<div id="loading" style="display:none"><img src="/static/images/loading.gif" alt="loading..."/></div>
{% endblock %}
